<template>
  <div>
    <van-nav-bar
      title="订单确认页面"
      left-text="返回"
      left-arrow
      
      @click-left="onClickLeft"
    />
    <van-contact-card
      type="edit"
      :tel="defaultArr == '' ? '默认地址信息' : defaultArr"
      :name="
        defaultArr == ''
          ? ''
          : addressMain[0].receiver + ' ' + addressMain[0].mobile
      "
      @click="onEdit"
    />
    <div style="height: 1rem; background-color: #fafafa"></div>
    <div style="height: 1rem"></div>
    <div v-for="shop in shopCartInfo.shopCartOrders" :key="shop.shopId">
      <div
        v-for="items in shop.shopCartItemDiscounts[0].shopCartItems"
        :key="items.basketId"
      >
        <div>
          <span class="shop-name">{{ shop.shopName }}</span>
          <van-card
            :num="items.prodCount"
            :price="items.price"
            :desc="items.skuName"
            :title="items.prodName"
            :thumb="items.pic"
          >
            <template #footer>
              <van-stepper :value="items.prodCount" disabled integer />
              <span class="goods-transfee">邮费: {{ shop.transfee }} 元</span>
            </template>
          </van-card>
        </div>
      </div>
      <van-cell-group>
        <van-field
          v-model="shop.remarks"
          label="订单备注"
          placeholder="请输入备注信息"
        />
      </van-cell-group>
    </div>
    <van-coupon-cell :coupons="[]" />
    <div style="height: 1rem; background-color: #fafafa"></div>
    <div class="prod-money">
      <van-cell-group>
        <van-cell title="总金额" :value="shopCartInfo.total">
          <template #default>
            <div>￥{{ shopCartInfo.total }}</div>
          </template>
        </van-cell>
        <van-cell title="优惠金额" :value="shopCartInfo.orderReduce" />
        <van-cell title="优惠金额" :value="shopCartInfo.orderReduce" />
        <van-cell title="商品总数" :value="shopCartInfo.totalCount" />
        <van-cell title="支付金额">
          <template #default>
            <div class="money-total-count">
              合计: ￥{{ shopCartInfo.actualTotal }}
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div style="height: 3rem"></div>
    <van-submit-bar
      :price="shopCartInfo.actualTotal * 100"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { addressList } from "@/api/address.js";
import { orderConfirm,submit } from "@/api/user.js";
import { useRouter } from "vue-router";
import { payment } from "../api/pay";
const addressMain = ref([]);
const defaultArr = ref("");
let shopCartInfo = ref([]);
let confirm = reactive({});
let submitData = reactive({
  orderShopParam: [],
});
const onClickLeft = () => history.back();
onMounted(() => {
  confirm = JSON.parse(sessionStorage.getItem("confirm"));
  console.log(confirm, "11");
  init();
});
async function onSubmit() {
  const CartInfo = shopCartInfo.value.shopCartOrders;
  for (let i = 0; i < CartInfo.length; i++) {
    submitData.orderShopParam.push({
      shopId: CartInfo[i].shopId,
      remarks: CartInfo[i].remarks,
    });
  }
  const result = await submit(submitData);
  console.log(result, "result");
  const payRes = await payment({
    orderNumbers: result.orderNumbers,
    payType: 1,
  });
  console.log(payRes, "payRes");
  showDialog({
    title: "支付成功",
    message: "恭喜您支付已完成",
    theme: "round-button",
  }).then(() => {
    router.push("/my");
  });
}
const router = useRouter();
async function init() {
  shopCartInfo.value = await orderConfirm(confirm);
  addressMain.value = await addressList();
  defaultArr.value =
    addressMain.value[0].province +
    "" +
    addressMain.value[0].city +
    "" +
    addressMain.value[0].area +
    "" +
    addressMain.value[0].addr;
}
function onEdit() {
  router.push("/address");
}
</script>

<style lang="scss" scoped>
.money-total-count {
  color: red;
}

::v-deep.van-cell__title {
  text-align: left;
}

.goods-transfee {
  font-size: larger;
  display: inline-block;
  margin-top: 1rem;
}

.shop-name {
  display: inline-block;
  height: 2.5rem;
  text-align: left;
  width: 100%;
  margin-top: 1rem;
  font-weight: 600;
  padding-left: 1rem;
}
</style>
